<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    <h1 v-html="title"></h1>
    <p v-text="poem"></p>
    <button v-on:click="togglePoem">显示/隐藏诗词</button>
</div>
<script>
    constcomApp = Vue.createApp({
        data(){
            return{
                title:"<span style='color:red;'>静夜思</span>",
                poem:"床前明月光，疑似地上霜。",
                showPoem:false,
            }
        },
        methods: {
            togglePoem(){
                this.showPoem = ! this.showPoem;
                if(this.showPoem){
                    this.poem +="举头望明月，低头思故乡。";
                }else{
                    this.poem = "床前明月光，疑似地上霜。";
                }
            },
            
        },
    }).mount("#app");
</script>
</body>
</html>